<template>
  <view>
    <u-navbar :background="{ background: '' }" back-icon-color="#222222" title-color="#222222" :is-back="true" :immersive="true" :border-bottom="false"></u-navbar>
    <view class="wrap" style="height: 778rpx; width: 100%">
      <u-swiper :list="list" mode="number" indicator-pos="bottomLeft" height="778"></u-swiper>
    </view>
    <!-- 秒杀 -->
    <view
      class=""
      style="width: 100%; height: 124rpx; background: #fff0f1; display: flex; align-items: center; justify-content: space-between; padding: 0 28rpx"
      v-if="shopdetail.is_seckill == 1"
    >
      <view class="">
        <view class="" style="font-size: 28rpx; color: #e50014">限时折扣</view>
        <view class="" style="padding-top: 15rpx" v-if="shopdetail.specs">
          <text style="font-size: 28rpx; font-weight: 600; color: #e50014">￥{{ shopdetail.specs[0].seckill_price }}</text>
          <text style="" style="font-size: 22rpx; color: #999999; text-decoration: line-through; padding-left: 20rpx">{{ shopdetail.specs_price }}</text>
        </view>
      </view>
      <view class="" style="font-size: 28rpx; color: #222; background: #fff0f1">
        倒计时
        <u-count-down :timestamp="shopdetail.second" :show-days="false" bg-color="#FFF0F1"></u-count-down>
      </view>
    </view>

    <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" style="display: flex; align-items: center; padding: 39rpx 0 28rpx 33rpx">
        <view class="" style="color: #e50014" v-if="shopdetail.specs_price">
          <text style="font-size: 24rpx">￥</text>
          <text style="font-size: 36rpx">{{ shopdetail.specs_price.split('.')[0] }}.</text>
          <text style="font-size: 24rpx">{{ shopdetail.specs_price.split('.')[1] }}</text>
        </view>
        <view
          class=""
          style="
            width: 106rpx;
            text-align: center;
            line-height: 36rpx;
            font-size: 22rpx;
            color: #e50014;
            height: 36rpx;
            background: #ffedee;
            border-radius: 4rpx;
            margin-left: 15rpx;
          "
        >
          多买优惠
        </view>
      </view>
      <view class="" style="font-size: 28rpx; padding: 0 0 43rpx 28rpx; font-weight: bold">
        {{ shopdetail.goods_name }}
      </view>
    </view>
    <!-- 选择 -->
    <view class="" style="margin: 0 28rpx; background: #fff">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 35rpx 31rpx; font-size: 28rpx" @tap="show1 = true">
        <view class="">
          <text>选择:</text>
          <text style="padding-left: 20rpx">规则数量</text>
        </view>
        <view class="">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 35rpx 31rpx; font-size: 28rpx" @tap="add">
        <view class="" style="display: flex">
          <view style="width: 70rpx">送至:</view>
          <text style="padding-left: 20rpx" v-if="!address">选择地址</text>
          <view class="" style="display: flex; align-items: flex-start; padding: 0 18rpx" v-else>
            <image src="https://wenzhen.jiangkukeji360.com/static/shop/address.png" mode="" style="width: 32rpx; height: 32rpx"></image>
            <view class="" style="font-size: 26rpx; padding-left: 15rpx">
              {{ address }}
            </view>
          </view>
        </view>
        <view class="">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
    <!-- 店铺 -->
    <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx" v-if="shopdetail.shop">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 21rpx 31rpx">
        <view class="" style="display: flex; align-items: center">
          <image src="https://wenzhen.jiangkukeji360.com/static/shop/user/z4.png" mode="" style="width: 36rpx; height: 36rpx"></image>
          <view class="" style="font-size: 30rpx; padding-left: 32rpx">店铺信息</view>
        </view>
        <view class="" @tap="geu">
          <u-icon name="arrow-right" color="#999999" size="24" label="查看详情" label-pos="left"></u-icon>
        </view>
      </view>
      <view class="" style="font-size: 26rpx; display: flex; align-items: center; padding-left: 18rpx">
        <image :src="shopdetail.shop.business_license" mode="" style="width: 65rpx; height: 65rpx; border-radius: 50%"></image>
        <view class="" style="padding-left: 16rpx">
          {{ shopdetail.shop.shop_name }}
        </view>
      </view>

      <view class="" style="font-size: 26rpx; display: flex; align-items: center; padding-left: 33rpx; padding-top: 14rpx; padding-bottom: 29rpx">
        <view class="" style="width: 36rpx; height: 36rpx">
          <image src="https://wenzhen.jiangkukeji360.com/static/shop/dd.png" mode="" style="width: 36rpx; height: 36rpx"></image>
        </view>

        <view class="" style="margin-left: 16rpx; color: #666666">
          {{ shopdetail.shop.address }}
        </view>
      </view>
    </view>

    <!-- 商品评价 -->
    <view class="" style="margin: 0 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 21rpx 0">
        <view class="" style="font-size: 30rpx; padding-left: 32rpx">商品评价</view>
        <view class="" @tap="look" style="padding-right: 28rpx">
          <u-icon name="arrow-right" color="#999999" size="24" label="查看全部" label-pos="left"></u-icon>
        </view>
      </view>
      <!-- 人 -->
      <view class="" v-for="(i, k) in shopdetail.evaluate" :key="k">
        <view class="" style="display: flex; align-items: center; padding: 15rpx 0 30rpx 30rpx">
          <image :src="i.avatar" mode="" style="width: 79rpx; height: 79rpx; border-radius: 50%"></image>
          <view class="" style="margin-left: 18rpx; font-size: 28rpx">
            <view class="">
              {{ i.nickname }}
            </view>
            <view class="">
              <image src="https://wenzhen.jiangkukeji360.com/static/shop/xing.png" mode="" style="width: 28rpx; height: 28rpx; margin-right: 10rpx" v-for="m in i.star"></image>
            </view>
          </view>
        </view>
        <view class="" style="padding: 0 31rpx; font-size: 28rpx">
          {{ i.content }}
        </view>
        <view class="" style="padding: 15rpx 30rpx; display: flex; padding-bottom: 58rpx">
          <image
            :src="img_url + n"
            mode="aspectFill"
            style="width: 200rpx; height: 200rpx; border-radius: 20rpx; margin-right: 28rpx"
            v-for="(n, s) in i.images"
            :key="s"
            @tap="looks(i.images, s)"
          ></image>
        </view>
      </view>
    </view>
    <!-- 宝贝详情 -->
    <view class="" style="font-size: 28rpx; color: #999999; text-align: center; padding-top: 20rpx">宝贝详情</view>
    <view class="" style="padding: 28rpx">
      <rich-text :nodes="shopdetail.goods_details"></rich-text>
    </view>

    <view class="" style="height: 120rpx"></view>

    <!-- 底部栏 -->
    <view
      class=""
      style="
        background: #fff;
        position: fixed;
        bottom: 0;
        height: 99rpx;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <view class="" style="text-align: center; padding-left: 52rpx" @tap="show = true">
        <image src="https://wenzhen.jiangkukeji360.com/static/shop/erji.png" mode="" style="width: 44rpx; height: 44rpx"></image>
        <view class="" style="font-size: 24rpx">客服</view>
      </view>

      <!-- 按钮 -->
      <view class="" style="display: flex; align-items: center; padding-right: 21rpx">
        <view class="btn" @tap="show1 = true" v-if="shopdetail.is_seckill != 1">加入购物车</view>
        <view class="btn1" style="margin-left: 20rpx" @tap="show1 = true">马上抢</view>
      </view>
    </view>
    <!-- 弹出层 -->
    <u-popup v-model="show1" mode="bottom" border-radius="20" :closeable="true" z-index="666">
      <view>
        <view class="">
          <view class="" style="display: flex; padding: 16rpx 28rpx" v-if="shopdetail.specs && shopdetail.specs[current]">
            <image :src="img_url + shopdetail.specs[current].specs_image" mode="aspectFill" style="width: 160rpx; height: 160rpx; border-radius: 12rpx"></image>
            <view class="" style="font-size: 42rpx; color: #e50014; padding-top: 20rpx; padding-left: 21rpx">
              <text style="font-size: 28rpx">￥</text>
              {{ shopdetail.specs[current].specs_price }}
            </view>
          </view>
          <view class="" style="margin: 0 29rpx; height: 1rpx; border: 1rpx solid #e7e7e7"></view>
          <!-- 选择规格 -->
          <view class="" style="font-size: 30rpx; padding: 21rpx 0 0 30rpx">选择规格</view>

          <!--  -->
          <view class="" style="display: flex; align-items: center; flex-wrap: wrap; padding: 0 0rpx 0 29rpx">
            <view :class="current == k ? 't1' : ''" v-for="(i, k) in shopdetail.specs" @tap="current = k" style="margin-top: 32rpx; margin-right: 17rpx; border-radius: 12rpx">
              <image :src="img_url + i.specs_image" mode="aspectFill" style="width: 220rpx; height: 220rpx; border-radius: 12rpx"></image>
              <view :class="current == k ? 'on1' : 'on'">
                {{ i.specs_name }}
              </view>
            </view>
          </view>
          <!--  -->
          <view class="" style="margin: 29rpx; height: 1rpx; border: 1rpx solid #e7e7e7"></view>
          <!-- 购买数量 -->
          <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 0rpx 30rpx">
            <view class="" style="display: flex; align-items: center">
              <view class="" style="font-size: 28rpx">购买数量</view>
              <view class="" style="font-size: 24rpx; color: #999999; padding-left: 20rpx" v-if="shopdetail.specs && shopdetail.specs[current]">
                库存{{ shopdetail.specs[current].specs_stock }}件
              </view>
            </view>
            <view class="">
              <u-number-box v-model="value" @change="valChange" :min="1" :disabled="shopdetail.is_seckill == 1 ? true : false"></u-number-box>
            </view>
          </view>
          <!-- 	按钮 -->
          <view class="">
            <view class="" style="display: flex; align-items: center; padding-right: 21rpx; justify-content: center; margin: 44rpx 0">
              <view class="btn2" @tap="shopcar" v-if="shopdetail.is_seckill != 1">加入购物车</view>
              <view class="btn3" style="margin-left: 20rpx" @tap="order">马上抢</view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <u-modal v-model="show" :content="'客服电话：' + mobile" title="" :show-cancel-button="true" confirm-text="呼叫" @confirm="confirm" confirm-color="#E50014"></u-modal>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      img_url: this.img_url,
      value: 1,
      list: [],
      show: false,
      show1: false,
      current: 0,
      id: null,
      shopdetail: {},
      address: null,
      type: null,
      disabout: false,
      mobile: ''
    };
  },
  //方法
  methods: {
    order() {
      // uni.navigateTo({
      // 	url:'/pages/shop/queorder?type='+JSON.stringify(this.shopdetail)+'&num='+this.value+'&current='+this.current
      // })
      let good = [
        {
          goods_id: this.shopdetail.goods_id,
          specs_id: this.shopdetail.specs[this.current].specs_id,
          goods_num: this.value
        }
      ];
      this.api({
        url: '/api//shop/preOrder',
        method: 'post',
        data: {
          goods: JSON.stringify(good)
        }
      }).then((res) => {
        if (!this.type) {
          uni.navigateTo({
            url: '/shop/queorder/queorder?type=' + JSON.stringify(res.data)
          });
        } else {
          uni.navigateTo({
            url: '/shop/queorder/queorder?type=' + JSON.stringify(res.data) + '&year=1'
          });
        }
      });
    },
    confirm() {
      uni.makePhoneCall({
        phoneNumber: this.mobile
      });
    },
    looks(m, e) {
      let list = [];
      m.map((i) => {
        console.log(i);
        list.push(this.img_url + i);
      });

      uni.previewImage({
        urls: list,
        current: e
      });
    },
    valChange(e) {
      console.log('当前值为: ' + e.value);
      if (this.type == 1) {
        // if(e.value>1){
        this.value = 1;
        uni.showToast({
          title: '每人只限购一件商品噢',
          icon: 'none'
        });

        // }
      } else {
      }
    },
    geu() {
      uni.navigateTo({
        url: '/shop/store/store?shop=' + JSON.stringify(this.shopdetail.shop)
      });
    },
    look() {
      uni.navigateTo({
        url: '/shop/pj/pj?id=' + this.id
      });
    },
    detail() {
      this.api({
        url: '/api/shop/goodsDetails',
        method: 'post',
        data: {
          goods_id: this.id
        }
      }).then((res) => {
        this.shopdetail = res.data;
        this.mobile = res.data.shop.mobile;
        let arr = res.data.goods_images;
        arr.map((i) => {
          this.list.push({
            image: this.img_url + i
          });
        });
      });
    },
    add() {
      uni.navigateTo({
        url: '/shop/address/address?type=1'
      });
    },
    shopcar() {
      if (this.shopdetail.specs[this.current].specs_stock < this.value) {
        uni.showToast({
          title: '已超出库存数量',
          icon: 'none'
        });
      } else {
        this.api({
          url: '/api/shop/addShopping',
          method: 'post',
          data: {
            goods_id: this.shopdetail.goods_id,
            specs_id: this.shopdetail.specs[this.current].specs_id,
            goods_num: this.value
          }
        }).then((res) => {
          this.show1 = false;
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        });
      }
    }
  },
  //首页渲染
  onLoad(options) {
    this.id = options.id;
    if (options.type) {
      this.type = options.type;
    }
    this.detail();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}

.btn {
  width: 200rpx;
  height: 66rpx;
  background: linear-gradient(0deg, #ffb30f 0%, #ffc675 100%);
  border-radius: 33rpx;
  text-align: center;
  line-height: 66rpx;
  color: #f8f8f8;
  font-size: 28rpx;
}

.btn1 {
  width: 200rpx;
  height: 66rpx;
  background: linear-gradient(0deg, #e50014 0%, #ff6572 100%);
  border-radius: 33rpx;
  text-align: center;
  line-height: 66rpx;
  color: #f8f8f8;
  font-size: 28rpx;
}

.on {
  width: 220rpx;
  background: #f8f8f8;
  height: 74rpx;
  line-height: 74rpx;
  font-size: 30rpx;
  text-align: center;
  border-radius: 12rpx;
}

.on1 {
  width: 220rpx;
  background: #fff1f1;
  height: 74rpx;
  line-height: 74rpx;
  font-size: 30rpx;
  text-align: center;
  color: #e50014;
  border-radius: 12rpx;
}

.t1 {
  width: 220rpx;
  border: 1rpx solid #e50014;
}

.btn2 {
  width: 320rpx;
  height: 76rpx;
  background: linear-gradient(0deg, #ffb30f 0%, #ffc675 100%);
  border-radius: 38rpx;
  line-height: 76rpx;
  text-align: center;
  font-size: 28rpx;
  color: #f8f8f8;
}

.btn3 {
  width: 320rpx;
  height: 76rpx;

  background: linear-gradient(0deg, #e50014 0%, #ff6572 100%);
  border-radius: 38rpx;
  line-height: 76rpx;
  text-align: center;
  font-size: 28rpx;
  color: #f8f8f8;
}
</style>
